<template>
  <div>
    <!--查询表单-->
    <el-form :inline="true" :model="tbUser" class="demo-form-inline">
      <el-form-item label="用户帐号">
        <el-input v-model="tbUser.username" placeholder="请输入用户帐号"></el-input>
      </el-form-item>
      <el-form-item label="用户昵称">
        <el-input v-model="tbUser.nickName" placeholder="请输入用户昵称"></el-input>
      </el-form-item>
      <el-form-item label="注册时间">
        <el-date-picker
          v-model="tbUser.created"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <!--数据表格-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="用户名" width="180" prop="username"></el-table-column>
      <el-table-column label="注册手机号" width="180" prop="phone"></el-table-column>
      <el-table-column label="用户昵称" width="140">
        <template slot-scope="scope">
          <span
            v-if="scope.row.nickName==null || scope.row.nickName==undefined || scope.row.nickName.split(' ').length == 1"
          >
            <p>{{scope.row.nickName}}</p>
          </span>
          <span v-for="(row,i) in scope.row.nickName.split(' ')" :key="i" v-else>
            <p v-if="i == 0">{{row}}</p>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="会员等级" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.userLevel == 0 || scope.row.userLevel == undefined ">普通会员</span>
          <span v-if="scope.row.userLevel == 1 ">黄金会员</span>
          <span v-if="scope.row.userLevel == 2 ">白金会员</span>
          <span v-if="scope.row.userLevel == 3 || scope.row.userLevel > 2 ">钻石会员</span>
        </template>
      </el-table-column>
      <el-table-column label="消费金额" width="130" prop="countMoney"></el-table-column>
      <el-table-column label="总订单数" width="130" prop="countNum"></el-table-column>
      <el-table-column label="账户启用状态" width="130">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="details(scope.row)">详情</el-button>
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.username)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--编辑菜单-->
    <el-dialog title="编辑" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <span>
        <el-form
          :model="formUser"
          status-icon
          :rules="rules"
          ref="formUser"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="手机号码">
            <el-input v-model="formUser.phone"></el-input>
          </el-form-item>
          <el-form-item label="会员等级">
            <el-select v-model="formUser.userLevel" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="formUser.sex" label="1">男</el-radio>
            <el-radio v-model="formUser.sex" label="0">女</el-radio>
          </el-form-item>
          <el-form-item label="生日">
            <el-date-picker
              v-model="formUser.birthday"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="城市">
            <el-select v-model="formUser.provinceid" clearable placeholder="请选择" @change="provinces">
              <el-option
                v-for="item in province"
                :key="item.provinceid"
                :label="item.province"
                :value="item.provinceid"
                >
              </el-option>
            </el-select>
            <el-select v-model="formUser.cityid" clearable placeholder="请选择" @change="citys">
              <el-option
                v-for="item in city"
                :key="item.cityid"
                :label="item.city"
                :value="item.cityid">
              </el-option>
            </el-select>
            <el-select v-model="formUser.areaid" clearable placeholder="请选择" >
              <el-option
                v-for="item in area"
                :key="item.areaid"
                :label="item.area"
                :value="item.areaid">
              </el-option>
            </el-select>
          </el-form-item>-->
          <el-form-item label="个性签名">
            <el-input v-model="formUser.nick"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="pass">
            <el-input type="password" v-model="formUser.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="formUser.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="账户状态">
            <el-switch
              v-model="formUser.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit('formUser')">确 定</el-button>
      </span>
    </el-dialog>

    <!--分页组件-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizeList"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.formUser.checkPass !== '') {
          this.$refs.formUser.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.formUser.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      // 呈现数据
      tableData: [],
      // 当前页码
      currentPage: 1,
      // 页大小
      pageSize: 10,
      // 页大小列表
      pageSizeList: [10, 20, 50, 100],
      // 总记录数
      total: 0,
      // 查询表单对象
      tbUser: {},
      // 编辑
      dialogVisible: false,
      // 下拉菜单
      options: [{
        value: 0,
        label: '普通会员'
      }, {
        value: 1,
        label: '黄金会员'
      }, {
        value: 2,
        label: '白金会员'
      }, {
        value: 3,
        label: '钻石会员'
      }],
      // // 省
      // province: [],
      // // 市
      // cities: [],
      // city: [],
      // // 县
      // areas: [],
      // area: [],
      // 编辑表单数据
      formUser: {
        pass: '',
        checkPass: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 确认编辑
    async editSubmit () {
      console.log(this.formUser)
      var tbUser = {
        birthday: this.formUser.birthday,
        password: this.formUser.pass,
        userLevel: this.formUser.userLevel,
        sex: this.formUser.sex,
        nickName: this.formUser.nickName + ' ' + this.formUser.nick,
        status: this.formUser.status,
        username: this.formUser.username
      }
      if (this.formUser.nickName == null || this.formUser.nickName == undefined || this.formUser.nickName.split(' ').length == 1) {
        tbUser.nickName = this.formUser.nickName + ' ' + this.formUser.nick
      } else {
        tbUser = this.formUser.nickName.split(' ')[1] + this.formUser.nick
      }
      const { data: res } = await this.$http.put('vi/user/update', tbUser)
      this.dialogVisible = false;
      this.getUserList()

    },
    // 详情
    details (row) {
      this.$router.push({
        path: '/home/userByIndex',
        query: {
          username: row.username
        }
      })
    },
    // 打开编辑框
    async handleEdit (row) {
      this.formUser = row;
      if (this.formUser.nickName == null || this.formUser.nickName == undefined || this.formUser.nickName.split(' ').length == 1) {
        this.formUser.nick = ' '
      } else {
        this.formUser.nick = this.formUser.nickName.split(' ')[1]
      }

      // // 查询地址
      // const {data:res} = await this.$http.get('vi/user/address/findAddressList?username=' + this.formUser.username)
      // for(var i=0;i<res.length;i++){
      //   if(res[i].isDefault == 1){
      //     this.formUser.provinceid = res[i].provinceid
      //     this.formUser.cityid = res[i].cityid
      //     this.formUser.areaid = res[i].areaid
      //   }
      // }
      // console.log(this.formUser)
      this.dialogVisible = true;
    },
    // 查询按钮
    onSubmit () {
      this.getUserList()
    },
    // 获取品牌信息列表
    async getUserList () {
      // 发送请求查询数据并返回
      const { data: res } = await this.$http.post(`vi/user/user/pageQueryByAll/${this.currentPage}/${this.pageSize}`, this.tbUser)
      this.tableData = res.data.pageUtils.rows
      this.total = res.data.pageUtils.total
    },
    // 页大小改变
    async handleSizeChange (val) {
      this.pageSize = val
      this.getUserList()
    },
    // 页码改变
    async handleCurrentChange (val) {
      this.currentPage = val
      this.getUserList()
    },
    // 确认关闭按钮
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    // // 省级回调
    // provinces(){
    //   this.city = []
    //    for(var i=0;i<this.cities.length;i++){
    //      if(this.cities[i].provinceid == this.formUser.provinceid){
    //        this.city.push(this.cities[i])
    //      }
    //    }
    // },
    // // 市级回调
    // citys(){
    //   this.area = []
    //    for(var i=0;i<this.areas.length;i++){
    //      if(this.areas[i].cityid == this.formUser.cityid){
    //        this.area.push(this.areas[i])
    //      }
    //    }
    // }
    handleDelete (username) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const { data: res } = await this.$http.delete(
            `vi/user/delete/${username}`
          );
          if (res.success === true) {
            this.$message({
              type: "success",
              message: res.message
            });
          } else {
            this.$message({
              type: "info",
              message: res.message
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      this.getUserList()
    }
  },
  // 钩子函数
  async created () {
    this.getUserList()
    
    // 查询出所有的省
    // const { data: res1} = await this.$http.get('vi/user/provinces/list')
    // this.province = res1.data.list
    // const { data: res2} = await this.$http.get('vi/user/cities/list')
    // this.cities = res2.data.list
    // this.city = res2.data.list
    // const { data: res3} = await this.$http.get('vi/user/areas/list')
    // this.areas = res3.data.list
    // this.area = res3.data.list
  }
}
</script>

<style></style>
